<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--查询-->
      <el-form
        @submit.native.prevent
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-form-item label="租户名" prop="distrName">
          <el-input v-model="queryParams.distrName" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['distribution:user:insertDistributorUser']"
        >
          创建供应商
        </el-button>
      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
    </el-row>
    <el-table
      :height="calTableHeight()"
      v-loading="loading"
      ref="TableRef"
      :data="tableData"
      @selection-change="(rows) => (tableCheck = rows)"
    >
      <el-table-column show-overflow-tooltip type="selection" width="50" align="center" />
      <!-- 供应商id 供应商名称 商家手续费 积分 推荐人 推荐人上级 总公司 云池自动审批 操作 -->
      <!-- 供应商id -->
      <el-table-column show-overflow-tooltip label="供应商id" align="center" prop="distrId" />
      <!-- 供应商名称 -->
      <el-table-column show-overflow-tooltip label="供应商名称" align="center" prop="distrName" />
      <!-- 商家手续费 -->
      <!-- <el-table-column show-overflow-tooltip label="商家手续费(JPY)" align="center" prop="handlingFee">
        <template slot-scope="{ row }">
          <span v-if="row.handlingFee">{{ row.handlingFee }}</span>
          <span v-else>无</span>
        </template>
      </el-table-column> -->

      <!-- 积分 -->
      <!-- <el-table-column show-overflow-tooltip label="积分" align="center" prop="points" /> -->
      <!-- 推荐人 -->
      <!-- <el-table-column
        show-overflow-tooltip
        label="推荐人"
        align="center"
        width="200"
        prop="referrerName"
      /> -->
      <!-- 推荐人分成比例 -->
      <el-table-column
        show-overflow-tooltip
        label="推荐人分成比例"
        width="200"
        align="center"
        prop="referrerProportion"
      >
        <template slot-scope="{ row }">
          <div>{{ row.referrerName }}</div>
          <div style="color: green">{{ row.referrerProportion }}%</div>
        </template>
      </el-table-column>
      <!-- 推荐人上级 -->
      <!-- <el-table-column
        show-overflow-tooltip
        label="推荐人上级"
        width="200"
        align="center"
        prop="referrerSuperName"
      /> -->
      <!-- 推荐人上级分成比例 -->
      <el-table-column
        show-overflow-tooltip
        label="推荐人上级分成比例"
        width="200"
        align="center"
        prop="referrerProportion"
      >
        <template slot-scope="{ row }">
          <div>{{ row.referrerSuperName }}</div>
          <div style="color: green">{{ row.referrerSuperProportion }}%</div>
        </template>
      </el-table-column>

      <!-- 总公司上级分成比例 -->
      <el-table-column
        show-overflow-tooltip
        label="总公司上级分成比例"
        width="200"
        align="center"
        prop="headOfficeName"
      >
        <template slot-scope="{ row }">
          <div>{{ row.headOfficeName }}</div>
          <div style="color: green">{{ row.headOfficeProportion }}%</div>
        </template>
      </el-table-column>
      <!-- 云池自动审批 -->
      <!-- 供应商云池自动审批开关 0：手动审批 1：自动审批通过 默认0 -->
      <!-- <el-table-column show-overflow-tooltip label="云池自动审批" align="center" prop="autoVerify">
        <template slot-scope="{ row }">

          <div @click="handleAutoVerify(row)" style="color: blue; cursor: pointer" v-if="row.autoVerify == 0">
            手动审批
          </div>
          <div
            @click="handleAutoVerify(row)"
            style="color: green; cursor: pointer"
            v-if="row.autoVerify == 1">
            自动审批通过
          </div>
        </template>
      </el-table-column> -->

      <el-table-column fixed="right" show-overflow-tooltip :label="$t('操作')" align="center" width="160">
        <template slot-scope="scope">
          <!-- 修改信息 修改密码 禁用/启用 修改供应商 -->
          <el-dropdown @command="(command) => handleCommand(command, scope.row)">
            <el-button size="mini" type="text" icon="el-icon-d-arrow-right"> 更多 </el-button>
            <el-dropdown-menu slot="dropdown">
              <!-- v-hasPermi="['system:user:resetPwd']" -->
              <!--
               查询供应商信息
               查看供应商用户
               编辑供应商信息
               推荐列表
             -->

              <el-dropdown-item command="roleManage" v-hasPermi="['distribution:roleDistr:list']">
                供应商角色管理
              </el-dropdown-item>
              <el-dropdown-item command="handleDetail" v-hasPermi="['distribution:user:selectDistributorInfo']">
                查询供应商信息
              </el-dropdown-item>
              <el-dropdown-item
                command="supplierUsers"
                v-hasPermi="['distribution:user:getDistributorUserListByDistrId']"
              >
                查看供应商用户
              </el-dropdown-item>
              <el-dropdown-item v-hasPermi="['distribution:user:updateDistributorUser']" command="handleEdit">
                编辑供应商信息
              </el-dropdown-item>
              <el-dropdown-item v-hasPermi="['distribution:user:getReferrerList']" command="recommendList">
                推荐列表
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 新增修改 -->
    <AddAndEdit
      :show.sync="addAndEdit.show"
      @getList="getList"
      :formData="addAndEdit.formData"
      :type="addAndEdit.type"
    />
    <!-- 供应商用户 -->
    <SupplierUsers :show.sync="supplierUsers.show" @getList="getList" :formData="supplierUsers.formData" />
    <!-- 推荐列表 -->
    <RecommendList :show.sync="recommendList.show" @getList="getList" :formData="recommendList.formData" />
    <!-- 云池自动审批 -->
    <AutoVerify :show.sync="autoVerify.show" :formData="autoVerify.formData" @getList="getList" />
    <!-- 角色管理 -->
    <RoleManage :show.sync="roleManage.show" @getList="getList" :formData="roleManage.formData" />
  </div>
</template>

<script>
import { getDistributorUserList, checkOps, selectDistributorInfo } from '@/api/platform/supplierManage'
import AddAndEdit from './components/addAndEdit.vue'
import SupplierUsers from './components/supplierUsers/index.vue'
import RecommendList from './components/recommendList/index.vue'
import AutoVerify from './components/autoVerify.vue'
import RoleManage from './components/roleManage/index.vue'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'SupplierManage',
  components: {
    AddAndEdit,
    SupplierUsers,
    RecommendList,
    AutoVerify,
    RoleManage,
  },
  data() {
    return {
      /** 角色管理 */
      roleManage: {
        show: false,
        formData: {},

      },
      /**云池自动审批 */
      autoVerify: {
        show: false,
        formData: {},
      },
      /**新增/修改 */
      addAndEdit: {
        show: false,
        type: '',
        formData: {},
      },
      /**供应商用户 */
      supplierUsers: {
        show: false,
        formData: {},
      },
      /**推荐列表 */
      recommendList: {
        show: false,
        formData: {},
      },
      tableData: [],
      tableCheck: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  watch: {},
  created() {
    this.getList()
  },
  methods: {
    handleAutoVerify(row) {
      this.autoVerify.formData = row
      this.autoVerify.show = true
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryParams.pageSize = 10
      this.queryParams.pageNum = 1
      this.handleQuery()
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true
      getDistributorUserList(this.queryParams).then((response) => {
        this.tableData = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },

    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case 'handleDetail' /**查询供应商信息 */:
          selectDistributorInfo(row.id).then((res) => {
            const { code, data } = res
            if (code === 200) {
              this.addAndEdit.type = 'detail'
              this.addAndEdit.formData = data
              this.addAndEdit.show = true
            }
          })

          break
        case 'handleEdit' /**编辑供应商信息 */:
          selectDistributorInfo(row.id).then((res) => {
            const { code, data } = res
            if (code === 200) {
              this.addAndEdit.type = 'edit'
              this.addAndEdit.formData = data
              this.addAndEdit.show = true
            }
          })

          break
        case 'supplierUsers' /**查看供应商用户 */:
          this.supplierUsers.formData = row
          this.supplierUsers.show = true
          break
        case 'recommendList' /**推荐列表 */:
          this.recommendList.formData = row
          this.recommendList.show = true
          break
        case 'roleManage' /**卖家角色管理 */:
          this.roleManage.formData = row
          this.roleManage.show = true
          break
        default:
          break
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      checkOps(3).then((res) => {
        const { code } = res
        if (code === 200) {
          this.addAndEdit.type = 'add'
          this.addAndEdit.show = true
        }
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.addAndEdit.type = 'edit'
      this.addAndEdit.formData = row
      this.addAndEdit.show = true
    },
  },
}
</script>
